<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理 - 智慧农业信息管理系统</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body { background-color: #f5f7fa; }
        .navbar { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
        .content-wrapper {
            background: white;
            border-radius: 10px;
            padding: 25px;
            margin: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        .page-header {
            border-bottom: 2px solid #667eea;
            padding-bottom: 15px;
            margin-bottom: 20px;
        }
        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
        }
        .table thead { background-color: #f8f9fa; }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="/index">🌾 智慧农业管理系统</a>
            <div class="navbar-nav ms-auto">
                <a class="btn btn-outline-light btn-sm" href="/index">返回首页</a>
            </div>
        </div>
    </nav>

    <div class="content-wrapper">
        <div class="page-header d-flex justify-content-between align-items-center">
            <h3><i class="fas fa-users me-2"></i>用户管理</h3>
            <button class="btn btn-primary" onclick="addUser()">
                <i class="fas fa-plus me-2"></i>新增用户
            </button>
        </div>

        <table class="table table-hover">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>用户名</th>
                    <th>真实姓名</th>
                    <th>角色</th>
                    <th>电话</th>
                    <th>邮箱</th>
                    <th>状态</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr th:each="user : ${users}">
                    <td th:text="${user.id}">1</td>
                    <td th:text="${user.username}">admin</td>
                    <td th:text="${user.realName}">管理员</td>
                    <td>
                        <span class="badge bg-danger" th:if="${user.role == 'admin'}">管理员</span>
                        <span class="badge bg-primary" th:if="${user.role == 'manager'}">生产管理员</span>
                        <span class="badge bg-secondary" th:if="${user.role == 'visitor'}">游客</span>
                    </td>
                    <td th:text="${user.phone}">-</td>
                    <td th:text="${user.email}">-</td>
                    <td>
                        <span class="badge bg-success" th:if="${user.status == 1}">启用</span>
                        <span class="badge bg-secondary" th:if="${user.status == 0}">禁用</span>
                    </td>
                    <td th:text="${#temporals.format(user.createTime, 'yyyy-MM-dd')}">2024-01-01</td>
                    <td>
                        <button class="btn btn-sm btn-primary" th:onclick="'editUser(' + ${user.id} + ')'">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button class="btn btn-sm btn-danger" th:onclick="'deleteUser(' + ${user.id} + ')'">
                            <i class="fas fa-trash"></i>
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
        
        <div th:if="${users == null or users.isEmpty()}" class="alert alert-info text-center">
            暂无数据
        </div>
    </div>

    <!-- 编辑模态框 -->
    <div class="modal fade" id="userModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTitle">新增用户</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="userForm">
                        <input type="hidden" id="userId">
                        <div class="mb-3">
                            <label class="form-label">用户名</label>
                            <input type="text" class="form-control" id="username" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">密码</label>
                            <input type="password" class="form-control" id="password">
                            <small class="text-muted">编辑时不填写则不修改密码</small>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">真实姓名</label>
                            <input type="text" class="form-control" id="realName" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">角色</label>
                            <select class="form-select" id="role" required>
                                <option value="admin">管理员</option>
                                <option value="manager">生产管理员</option>
                                <option value="visitor">游客</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">电话</label>
                            <input type="text" class="form-control" id="phone">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">邮箱</label>
                            <input type="email" class="form-control" id="email">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">状态</label>
                            <select class="form-select" id="status" required>
                                <option value="1">启用</option>
                                <option value="0">禁用</option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="saveUser()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script>
        var userModal = new bootstrap.Modal(document.getElementById('userModal'));
        
        function addUser() {
            $('#modalTitle').text('新增用户');
            $('#userForm')[0].reset();
            $('#userId').val('');
            userModal.show();
        }
        
        function editUser(id) {
            $('#modalTitle').text('编辑用户');
            $.get('/user/detail/' + id, function(res) {
                if (res.code === 200) {
                    var user = res.data;
                    $('#userId').val(user.id);
                    $('#username').val(user.username);
                    $('#realName').val(user.realName);
                    $('#role').val(user.role);
                    $('#phone').val(user.phone);
                    $('#email').val(user.email);
                    $('#status').val(user.status);
                    userModal.show();
                }
            });
        }
        
        function saveUser() {
            var data = {
                id: $('#userId').val() || null,
                username: $('#username').val(),
                password: $('#password').val(),
                realName: $('#realName').val(),
                role: $('#role').val(),
                phone: $('#phone').val(),
                email: $('#email').val(),
                status: parseInt($('#status').val())
            };
            
            $.ajax({
                url: '/user/save',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(data),
                success: function(res) {
                    if (res.code === 200) {
                        alert('保存成功');
                        location.reload();
                    } else {
                        alert(res.message);
                    }
                }
            });
        }
        
        function deleteUser(id) {
            if (confirm('确定要删除该用户吗？')) {
                $.post('/user/delete/' + id, function(res) {
                    if (res.code === 200) {
                        alert('删除成功');
                        location.reload();
                    } else {
                        alert(res.message);
                    }
                });
            }
        }
    </script>
</body>
</html>

